<!DOCTYPE html>
<html>

<head>
<title>添加代理</title>
<meta http-equiv="Pragma" CONTENT="no-cache">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="renderer" content="webkit">

<%include("/common/include.html"){}%>
<link rel="stylesheet" href="${cxt!}/sb/plugins/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<style type="text/css">
		/* .frame{  
            width: 125px;  
            height: 32px;    
            position: absolute;
            background: #FF8400;
            display: none;
            border-radius:3px;  
            z-index:1;      
        }  
        .triangle{  
            width: 10px;  
            height: 10px;  
            display: inline-block;  
            position: absolute;  
            bottom: 11px;  
            left: -4px;  
            background-color: #FF8400;  
            transform:rotate(45deg);  
            -ms-transform:rotate(45deg);     
            -moz-transform:rotate(45deg);    
            -webkit-transform:rotate(45deg); 
            -o-transform:rotate(45deg); 
        }  
        .word{
        	font-size:5px;
        	margin-left: 14px;
        	position: absolute;
        	margin-top: 7px;
        	color: white;
        }
		.framex{  
            width: 125px;  
            height: 35px;    
            position: absolute;
            background: #FF8400;
            display: none;
            border-radius:3px;
            z-index:1;
        }  
        .trianglex{  
            width: 10px;  
            height: 10px;  
            display: inline-block;  
            position: absolute;  
            bottom: 13px;  
            left: 118px;  
            background-color: #FF8400;  
            transform:rotate(45deg);  
            -ms-transform:rotate(45deg);     
            -moz-transform:rotate(45deg);    
            -webkit-transform:rotate(45deg); 
            -o-transform:rotate(45deg); 
        }  
        .wordx{
        	font-size:5px;
        	margin-left: 14px;
        	position: absolute;
        	margin-top: 9px;
        	color: white;
        } */
        .required{
			display:inline-block;
			width: 30%;
		}
		.requiredx{
			display:inline-block;
			width: 89%;
		}
		label{
			text-align:right;
			width:70px;
			display:inline-block;
		}
</style>
</head>

<body>
	<!-- <div class="framex">  
		 <span class="trianglex"></span>  
		 <span class="wordx">该输入项为必输项</span>
	</div>
	<div class="frame">  
		<span class="triangle"></span>  
		<span class="word">该输入项为必输项</span>
	</div>   -->
	<div id="panel" class="easyui-panel" style="width: 100%; padding: 30px 60px; border-width: 0px;">
		<div style="margin:auto;width:760px">
			<form id="addDept" method="post" class="form">
				<div style="margin-bottom: 20px">
					<label class="label-top">所属部门:</label>
					<div class="required">
						<input class="easyui-textbox theme-textbox-radius" style="width: 100%;" value="${dept.name! }" data-options="disabled:true">
					</div>
					<span style="color:red">*必填项</span>
					<input type="hidden" name="user.departmentids" value="${dept.ids! }" />
					<label class="label-top" style="margin-left:30px">所属岗位:</label>
					<input id="citySel" type="text" style="width: 218px; height: 32.4px;padding-left:10px;border-radius:4px;" onclick="showMenu(); return false;" class="textbox"/>
					<span style="color:red">*必填项</span>
					<input id="stationids" type="hidden" name="user.stationids">
				</div>
				<div style="margin-bottom: 20px">
					<label class="label-top">姓名:</label>
					<div class="required">
						<input class="easyui-textbox theme-textbox-radius" style="width: 100%;" name="user.name">
					</div>
					<span style="color:red">*必填项</span>
					<label class="label-top" style="margin-left:30px">用户名:</label>
					<div class="required">
						<input class="easyui-textbox theme-textbox-radius" style="width: 100%;" name="user.username">
					</div>
					<span style="color:red">*必填项</span>
				</div>
				<div style="margin-bottom: 20px">
					<label class="label-top">电话:</label>
					<div class="required">
						<input class="easyui-textbox theme-textbox-radius" style="width: 100%;" name="user.mobile">
					</div>
					<span style="color:red">*必填项</span>
				</div>
				
			</form>
			
		</div>
	</div>
	<div id="menuContent" class="menuContent" style="display: none; position: absolute;">
		<ul id="treeDemo" class="ztree" style="margin-top: 0;width:218px"></ul>
	</div>

	<script type="text/javascript">
		//@ sourceURL=mmm.js
		var $form = $('#addDept');

		var submitNow = function($dialog, $grid, $tree, $pjq) {
			var url = "${cxt!}/departmentUser/addUser";
			$.post(url, sy.serializeObject($form), function(result) {
				if (result.code == '200') {
					$grid.datagrid('reload');
					$.slideMsg("添加成功！", $pjq);
					$dialog.dialog('destroy');
				} else {
					$.alert($pjq, result.msg);
				}
			}, 'json');
		};
		var submitForm = function($dialog, $grid, $tree, $pjq) {
			submitNow($dialog, $grid, $tree, $pjq);
			// 					$form.isValid(function(isValied){
			// 						if(isValied){
			// 							submitNow($dialog, $grid, $pjq);
			// 						}
			// 					});
		};

		var setting = {
			async : {
				enable : true,
				url : '${cxt!}/departmentUser/setStation',
				autoParam : [ "id=ids" ],//, "name=n", "level=lv"
				type : "post"
			},
			view : {
				dblClickExpand : false
			},
			data : {
				simpleData : {
					enable : true
				}
			},
			callback : {
				onClick : onClick
			}
		};

		function onClick(e, treeId, treeNode) {
			var zTree = $.fn.zTree.getZTreeObj("treeDemo"), nodes = zTree
					.getSelectedNodes(), v = "";
			nodes.sort(function compare(a, b) {
				return a.id - b.id;
			});
			for (var i = 0, l = nodes.length; i < l; i++) {
				v += nodes[i].name + ",";
			}
			if (v.length > 0)
				v = v.substring(0, v.length - 1);
			var cityObj = $("#citySel");
			cityObj.attr("value", v);
			$("#stationids").attr("value", treeNode.id);
		}
		function showMenu() {
			var cityObj = $("#citySel");
			var cityOffset = $("#citySel").offset();
			$("#menuContent").css({
				left : cityOffset.left + "px",
				top : cityOffset.top + cityObj.outerHeight() + "px"
			}).slideDown("fast");

			$("body").bind("mousedown", onBodyDown);
		}
		function hideMenu() {
			$("#menuContent").fadeOut("fast");
			$("body").unbind("mousedown", onBodyDown);
		}
		function onBodyDown(event) {
			if (!(event.target.id == "menuBtn"
					|| event.target.id == "menuContent" || $(event.target)
					.parents("#menuContent").length > 0)) {
				hideMenu();
			}
		}
		$.fn.zTree.init($("#treeDemo"), setting);
		/* $("#citySel").mouseover(function(){
			if(document.getElementById("panel").offsetWidth<=1020){
				var left=document.getElementById("citySel").offsetLeft-135;
				var top=document.getElementById("citySel").offsetTop;
				$(".framex").css("left",left+"px");
				$(".framex").css("top",top+"px");
				$(".framex").css("display","inline-block");
			}
			if(document.getElementById("panel").offsetWidth>1020){
				var left=document.getElementById("citySel").offsetLeft+310;
				var top=document.getElementById("citySel").offsetTop;
				$(".frame").css("left",left+"px");
				$(".frame").css("top",top+"px");
				$(".frame").css("display","inline-block");
			}
		});
		$("#citySel").mouseout(function(){
			 $(".framex").css("display","none");
			 $(".frame").css("display","none");
		});
		
		$("#citySel").mouseover(function(){
			if(document.getElementById("panel").offsetWidth<=1020){
				var left=document.getElementById("citySel").offsetLeft-135;
				var top=document.getElementById("citySel").offsetTop;
				$(".framex").css("left",left+"px");
				$(".framex").css("top",top+"px");
				$(".framex").css("display","inline-block");
			}
			if(document.getElementById("panel").offsetWidth>1020){
				var left=document.getElementById("citySel").offsetLeft+310;
				var top=document.getElementById("citySel").offsetTop;
				$(".frame").css("left",left+"px");
				$(".frame").css("top",top+"px");
				$(".frame").css("display","inline-block");
			}
		});
		$("#citySel").mouseout(function(){
			 $(".framex").css("display","none");
			 $(".frame").css("display","none");
		}); */
	</script>
</body>
</html>